<template>
  <view class="su-category-filter__container">
    <view class="su-category-filter-row">
      <view class="su-category-filter-item"
        :class="{active:activeItem && item[defaultProps.value]===activeItem[defaultProps.value]}"
        v-for="(item,index) in realList" :key="index" @click="itemClick(item)">
        {{item[defaultProps.label]}}
      </view>
    </view>
    <su-category-filter-row :defaultProps="defaultProps" :levelIndex="levelIndex+1" :resultObj="resultObj"
      v-if="activeItem && activeItem[defaultProps.children] && activeItem[defaultProps.children].length"
      :list="activeItem[defaultProps.children]" @change="changeHandler"></su-category-filter-row>
  </view>
</template>

<script>
  /**
   * @description 种类树中选择 - 行组件
   * @date 2022-07-03
   * @version v1.0.1
   * @author xx
   */
  export default {
    name: "su-category-filter-row",
    props: {
      list: {
        type: Array,
        default () {
          return []
        }
      },
      levelIndex:{
        type:Number,
        default:0
      },
      unshiftAll: {
        type: Boolean,
        default: true
      },
      resultObj:{
        type: Object,
        default () {
          return {}
        }
      },
      defaultProps: {
        type: Object,
        default () {
          return {
            label: 'label',
            value: 'value',
            children: 'children'
          }
        }
      }
    },
    data() {
      return {
        realList: [],
        activeItem: {
          [this.defaultProps.label]:'',
          [this.defaultProps.value]:'',
          [this.defaultProps.children]:[],
        }
      };
    },
    watch:{
      list:{
        deep:true,
        handler(val){
          this.initDetailtActive()
        }
      }
    },
    mounted() {
      this.initDetailtActive()
    },
    methods:{
      initDetailtActive(){
        const realList =this.$util.deepClone(this.list)
        if (this.unshiftAll && realList[0].label !== '全部') {
          realList.unshift({
            [this.defaultProps.label]: '全部',
            [this.defaultProps.value]: '',
            [this.defaultProps.children]: [],
          })
        }
        const activeItem = realList[0]
        this.realList = realList
        this.activeItem = activeItem
      },
      changeHandler(item,index){
        this.$emit('change',item,index)
      },
      itemClick(item){
        this.activeItem = item
        this.resultObj[this.levelIndex] = item
        this.$emit('change',item,this.levelIndex)
      }
    }
  }
</script>

<style lang="scss">
  .su-category-filter {
    &__container {
      display: flex;
      flex-direction: column;
      gap: 20upx;
    }

    &-row {
      overflow-x: auto;
      white-space: nowrap;
      padding: 0 20upx;
    }

    &-item {
      padding: 10upx 20upx;
      border-radius: 6upx;
      background-color: #f7f7f7;
      font-size: 26upx;
      margin-right: 20upx;
      display: inline-flex;
      &:active{
        background-color: #eee;
      }

      &.active {
        background-color: $u-primary;
        color: #fff;
      }
    }
  }
</style>
